var btns = document.getElementsByTagName("button"),
    imgs = document.getElementsByClassName("a1"),
    lis = document.getElementsByClassName("a2"),
    j = 0;
  
for (var i in btns) {
    btns[i].onclick = function () {
        if (this.innerText == ">") {
            j++;
            j == 4 && (j = 0);
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = "a2";
                imgs[i].className = "a1";
            }
            imgs[j].className = "active a1";
            lis[j].className = "active a2";
        } else {
            j--;
            j == -1 && (j = 3);
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = "a2";
                imgs[i].className = "a1";
            }
            imgs[j].className = "active a1";
            lis[j].className = "active a2";
        }
    }
}

for (var i in lis) {
    lis[i].onclick = function () {
        j = this.getAttribute("dy");
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = "a2";
            imgs[i].className = "a1";
        }
        imgs[j].className = "active a1";
        lis[j].className = "active a2";
    }
}
timer=setInterval(function(){
    j++;
    j == 4 && (j = 0);
    for (var i = 0; i < lis.length; i++) {
        lis[i].className = "a2";
        imgs[i].className = "a1";
    }
    imgs[j].className = "active a1";
    lis[j].className = "active a2";
},2000);


car.onmouseover=function(){
    clearInterval(timer);
}

car.onmouseout=function(){
timer=setInterval(function(){
    j++;
    j == 4 && (j = 0);
for (var i = 0; i < lis.length; i++) {
    lis[i].className = "a2";
    imgs[i].className = "a1";
}
    imgs[j].className = "active a1";
    lis[j].className = "active a2";
    },2000);
}



// 百度地图API功能
// var map = new BMap.Map('allmap');
// var poi = new BMap.Point(106.491281,29.537841);
// map.centerAndZoom(poi, 16);
// map.enableScrollWheelZoom();

// var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
//                 '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
//                 '地址:重庆市九龙坡区科员一路2号大西洋国际大厦<br/>电话：(023)020301040506<br/>简介：大西洋国际大厦位于重庆市九龙坡区科员一路2号，为千峰教育培训机构。' +
//               '</div>';

// //创建检索信息窗口对象
// var searchInfoWindow = null;
// searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
//         title  : "大西洋国际大厦",      //标题
//         width  : 290,             //宽度
//         height : 105,              //高度
//         panel  : "panel",         //检索结果面板
//         enableAutoPan : true,     //自动平移
//         searchTypes   :[
//             BMAPLIB_TAB_SEARCH,   //周边检索
//             BMAPLIB_TAB_TO_HERE,  //到这里去
//             BMAPLIB_TAB_FROM_HERE //从这里出发
//         ]
//     });
// var marker = new BMap.Marker(poi); //创建marker对象
// marker.enableDragging(); //marker可拖拽
// marker.addEventListener("click", function(e){
//     searchInfoWindow.open(marker);
// })
// function openInfoWindow3() {
//     searchInfoWindow3.open(new BMap.Point(116.328852,40.057031)); 
// }




//数据渲染
var xhr = new XMLHttpRequest();
        xhr.open("GET", "咖啡数据.php");
        xhr.send(null);
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var arr = JSON.parse(xhr.responseText).root.Love;
                arr.forEach(obj => {
                    

                });
                
            }
        }